<template>
  <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm" v-loading="loading">
    <el-form-item label="姓名">
      <span>{{user.name}}</span>
    </el-form-item>
    <el-form-item label="评分" prop="score" class="score">
      <el-rate v-model="ruleForm.score"></el-rate>
      <!--<el-input-number type="textarea" v-model="formValidate.productScore "></el-input-number>-->
    </el-form-item>
    <el-form-item label="评价内容" prop="comments">
      <el-input v-model="ruleForm.comments" type="textarea" :rows="7" placeholder="评价内容" />
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submitForm('ruleForm')" v-hasPermi="['admin:work:comment']">提交</el-button>
      <el-button @click="resetForm('ruleForm')">取消</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
import { commentUpdateApi, getEmployedNumApi,getCommentInfoApi } from '@/api/workApi'
  import {Debounce} from '@/utils/validate'
  const defaultObj = {
    work_rob_id: null,
    work_id : null,
    associated_id: null,//工人user_id
    comments: '',
    score:null,
  }
  export default {
    name: "WorkEditComment",
    props:{
      id: {
        type: Number,
        default: null
      },
      editData:{
        type:Object,
        default: () => {
          return { rules: [] }
        }
      }
    },
    data() {
      var checkScore = (rule, value, callback) => {
        if (!value) {
          return callback(new Error('评分不能为空'));
        }else{
          callback();
        }
      };
      return {
        loading:false,
        user:{},
        ruleForm: Object.assign({}, defaultObj),
        rules: {
          comments: [{ required: true, message: '请填评价内容', trigger: ['blur'] }],
          score: [{ required: true, validator: checkScore, trigger: ['blur'] }],
        },
      }
    },
    mounted() {
      this.initInfo()
      this.getCommentsInfo()
    },
    methods: {
      // 详情
      initInfo () {
        const { user_id, work_id, id } = this.editData //通过list中slot-scope=“scope“，scope.$index就是该行的下标，scope.row就是该行的数据所有消息对象，有了这两个参数就可以实现编辑、删除功能（this.editData就是scope.row传入的对象参数）

        this.user = this.editData.user
        this.ruleForm.work_rob_id = id
        this.ruleForm.work_id = work_id
        this.ruleForm.associated_id = user_id
      },
      getCommentsInfo() {
        this.loading = true

        const _pram = {
          work_rob_id:this.ruleForm.work_rob_id,
          work_id:this.ruleForm.work_id,
          associated_id:this.ruleForm.associated_id,
        }
        getCommentInfoApi(_pram).then(res => {
          if (res){
            let score = res.score * 1;
            this.ruleForm.comments = res.comments
            this.ruleForm.score = score
          }
          this.loading = false
        }).catch(res => {
          this.loading = false
        })
      },
      submitForm:Debounce(function(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            commentUpdateApi(this.ruleForm).then(async res => {
              this.$message.success('评价成功')
              this.$parent.$parent.visible = false
              this.$parent.$parent.workRobList()
            })
          } else {
            return false;
          }
        });
      }),
      resetForm(formName) {
        this.$refs[formName].resetFields();
        this.$emit('resetCommentForm');
      }
    }
  }
</script>

<style scoped lang="scss">
  .score{
    ::v-deep.el-rate{
      line-height: 2.4;
    }
  }
 .selWidth{
   width: 90%;
 }
</style>
